<template>
  <div class="order-visualization">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>订单数据可视化</h2>
      <p>实时监控订单关键指标与趋势分析</p>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-area">
      <el-row :gutter="17">
        <el-col :span="7">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="handleDateChange"
            :disabled="isLoading"
          ></el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="statusFilter"
            placeholder="订单状态"
            @change="handleFilterChange"
            :disabled="isLoading"
          >
            <el-option label="全部状态" value=""></el-option>
            <el-option label="已开单" value="billed"></el-option>
            <el-option label="待调度" value="unSchedule"></el-option>
            <el-option label="已完成" value="completed"></el-option>
            <el-option label="已取消" value="cancelled"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="transportFilter"
            placeholder="运输类型"
            @change="handleFilterChange"
            :disabled="isLoading"
          >
            <el-option label="全部类型" value=""></el-option>
            <el-option label="公路" value="公路"></el-option>
            <el-option label="铁路" value="铁路"></el-option>
            <el-option label="航空" value="航空"></el-option>
          </el-select>
        </el-col>
        <el-col :span="2" :offset="6">
          <el-button
            type="primary"
            @click="refreshData"
            :loading="isLoading"
          >
            <i class="el-icon-refresh"></i> 刷新
          </el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 关键指标卡片 -->
    <div class="stats-cards">
      <el-row :gutter="16">
        <!-- 总订单数 -->
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-label">总订单数</div>
              <div class="stat-value">{{ totalOrders || 0 }}</div>
              <div class="stat-trend" :class="totalOrdersTrendClass">
                <i :class="totalOrdersTrendIcon"></i>
                <span>{{ (totalOrdersTrend || 0).toFixed(1) }}%</span>
              </div>
            </div>
            <div class="stat-icon">
              <i class="el-icon-document"></i>
            </div>
          </el-card>
        </el-col>
        <!-- 总金额 -->
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-label">总金额(元)</div>
              <div class="stat-value">¥{{ formatMoney(totalAmount) }}</div>
              <div class="stat-trend" :class="totalAmountTrendClass">
                <i :class="totalAmountTrendIcon"></i>
                <span>{{ (totalAmountTrend || 0).toFixed(1) }}%</span>
              </div>
            </div>
            <div class="stat-icon money-icon">
              <i class="el-icon-money"></i>
            </div>
          </el-card>
        </el-col>
        <!-- 已完成订单 -->
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-label">已完成订单</div>
              <div class="stat-value">{{ completedOrders || 0 }}</div>
              <div class="stat-trend" :class="completedOrdersTrendClass">
                <i :class="completedOrdersTrendIcon"></i>
                <span>{{ (completedOrdersTrend || 0).toFixed(1) }}%</span>
              </div>
            </div>
            <div class="stat-icon success-icon">
              <i class="el-icon-check-circle"></i>
            </div>
          </el-card>
        </el-col>
        <!-- 平均处理时间 -->
        <el-col :span="6">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <div class="stat-label">平均处理时间(小时)</div>
              <div class="stat-value">{{ (avgProcessTime || 0).toFixed(1) }}</div>
              <div class="stat-trend" :class="avgProcessTimeTrendClass">
                <i :class="avgProcessTimeTrendIcon"></i>
                <span>{{ (avgProcessTimeTrend || 0).toFixed(1) }}%</span>
              </div>
            </div>
            <div class="stat-icon time-icon">
              <i class="el-icon-clock"></i>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表区域 -->
    <div class="charts-area">
      <!-- 订单趋势图 + 状态分布 -->
      <el-row :gutter="16" class="chart-row">
        <el-col :span="16">
          <el-card shadow="hover">
            <div slot="header" class="chart-header">
              <span>订单量趋势</span>
              <el-select
                v-model="timeRange"
                size="mini"
                @change="handleTimeRangeChange"
                :disabled="isLoading"
              >
                <el-option label="按日" value="day"></el-option>
                <el-option label="按周" value="week"></el-option>
                <el-option label="按月" value="month"></el-option>
              </el-select>
            </div>
            <div class="chart-container">
              <div ref="trendChart" class="chart"></div>
              <el-empty v-if="!trendChart && isLoading" description="加载中..."></el-empty>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div slot="header" class="chart-header">
              <span>订单状态分布</span>
            </div>
            <div class="chart-container">
              <div ref="statusPieChart" class="chart"></div>
              <el-empty v-if="!statusPieChart && isLoading" description="加载中..."></el-empty>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 运输类型 + 区域分布 -->
      <el-row :gutter="16" class="chart-row">
        <el-col :span="12">
          <el-card shadow="hover">
            <div slot="header" class="chart-header">
              <span>运输类型分布</span>
            </div>
            <div class="chart-container">
              <div ref="transportChart" class="chart"></div>
              <el-empty v-if="!transportChart && isLoading" description="加载中..."></el-empty>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <div slot="header" class="chart-header">
              <span>订单区域分布</span>
            </div>
            <div class="chart-container">
              <div ref="regionChart" class="chart"></div>
              <el-empty v-if="!regionChart && isLoading" description="加载中..."></el-empty>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 热门客户 -->
      <el-row :gutter="16" class="chart-row">
        <el-col :span="24">
          <el-card shadow="hover">
            <div slot="header" class="chart-header">
              <span>热门客户订单量（Top 10）</span>
            </div>
            <div class="chart-container">
              <div ref="customerChart" class="chart"></div>
              <el-empty v-if="!customerChart && isLoading" description="加载中..."></el-empty>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getOrderStats, getOrderTrend, getOrderDistribution } from '@/api/tms/orders/analysis'

export default {
  name: 'OrderVisualization',
  data() {
    return {
      // 筛选条件
      dateRange: [],
      statusFilter: '',
      transportFilter: '',
      timeRange: 'day',

      // 统计数据
      totalOrders: 0,
      totalAmount: 0,
      completedOrders: 0,
      avgProcessTime: 0,

      // 趋势数据
      totalOrdersTrend: 0,
      totalAmountTrend: 0,
      completedOrdersTrend: 0,
      avgProcessTimeTrend: 0,

      // 图表实例
      trendChart: null,
      statusPieChart: null,
      transportChart: null,
      regionChart: null,
      customerChart: null,

      // 加载状态
      isLoading: false,
      resizeHandler: null
    }
  },
  computed: {
    // 趋势样式计算
    totalOrdersTrendClass() {
      return (this.totalOrdersTrend || 0) >= 0 ? 'trend-up' : 'trend-down'
    },
    totalOrdersTrendIcon() {
      return (this.totalOrdersTrend || 0) >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
    },
    totalAmountTrendClass() {
      return (this.totalAmountTrend || 0) >= 0 ? 'trend-up' : 'trend-down'
    },
    totalAmountTrendIcon() {
      return (this.totalAmountTrend || 0) >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
    },
    completedOrdersTrendClass() {
      return (this.completedOrdersTrend || 0) >= 0 ? 'trend-up' : 'trend-down'
    },
    completedOrdersTrendIcon() {
      return (this.completedOrdersTrend || 0) >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
    },
    avgProcessTimeTrendClass() {
      return (this.avgProcessTimeTrend || 0) >= 0 ? 'trend-down' : 'trend-up'
    },
    avgProcessTimeTrendIcon() {
      return (this.avgProcessTimeTrend || 0) >= 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
    }
  },
  mounted() {
    // 初始化默认日期范围（近30天）
    const endDate = new Date()
    const startDate = new Date()
    startDate.setDate(startDate.getDate() - 30)
    this.dateRange = [
      this.formatDate(startDate),
      this.formatDate(endDate)
    ]

    // 确保DOM挂载后初始化图表
    this.$nextTick(() => {
      try {
        this.initCharts()
      } catch (err) {
        this.$message.error('图表初始化失败：' + err.message)
      }
    })

    // 加载数据
    this.loadData()

    // 监听窗口大小变化（防抖处理）
    this.resizeHandler = this.debounce(() => this.handleResize(), 200)
    window.addEventListener('resize', this.resizeHandler)
  },
  beforeDestroy() {
    // 销毁图表实例
    this.destroyCharts()
    // 移除事件监听
    window.removeEventListener('resize', this.resizeHandler)
  },
  methods: {
    // 防抖函数
    debounce(fn, delay) {
      let timer = null
      return (...args) => {
        clearTimeout(timer)
        timer = setTimeout(() => fn.apply(this, args), delay)
      }
    },

    // 初始化图表（添加容器存在性校验）
    initCharts() {
      // 订单趋势图
      if (this.$refs.trendChart) {
        this.trendChart = echarts.init(this.$refs.trendChart)
        this.trendChart.setOption(this.getEmptyChartOption('订单趋势加载中...', 'category'))
      } else {
        throw new Error('趋势图容器未找到（ref="trendChart"）')
      }

      // 订单状态分布图（饼图）
      if (this.$refs.statusPieChart) {
        this.statusPieChart = echarts.init(this.$refs.statusPieChart)
        this.statusPieChart.setOption(this.getPieEmptyOption('状态分布加载中...'))
      } else {
        throw new Error('状态分布图容器未找到（ref="statusPieChart"）')
      }

      // 运输类型分布图（横向柱状图）
      if (this.$refs.transportChart) {
        this.transportChart = echarts.init(this.$refs.transportChart)
        this.transportChart.setOption(this.getEmptyChartOption('运输类型加载中...', 'value', 'category'))
      } else {
        throw new Error('运输类型图容器未找到（ref="transportChart"）')
      }

      // 区域分布图（饼图）
      if (this.$refs.regionChart) {
        this.regionChart = echarts.init(this.$refs.regionChart)
        this.regionChart.setOption(this.getPieEmptyOption('区域分布加载中...'))
      } else {
        throw new Error('区域分布图容器未找到（ref="regionChart"）')
      }

      // 客户订单量图
      if (this.$refs.customerChart) {
        this.customerChart = echarts.init(this.$refs.customerChart)
        this.customerChart.setOption(this.getEmptyChartOption('客户订单量加载中...', 'category'))
      } else {
        throw new Error('客户订单量图容器未找到（ref="customerChart"）')
      }
    },

    // 销毁图表
    destroyCharts() {
      if (this.trendChart) this.trendChart.dispose()
      if (this.statusPieChart) this.statusPieChart.dispose()
      if (this.transportChart) this.transportChart.dispose()
      if (this.regionChart) this.regionChart.dispose()
      if (this.customerChart) this.customerChart.dispose()
    },

    // 折线/柱状图空配置（确保包含xAxis和yAxis）
    getEmptyChartOption(msg, xAxisType = 'category', yAxisType = 'value') {
      return {
        tooltip: { trigger: 'axis' },
        xAxis: [{
          type: xAxisType,
          data: [] // 始终初始化空数组，避免undefined
        }],
        yAxis: [{
          type: yAxisType
        }],
        series: [{
          type: 'bar',
          data: [],
          xAxisIndex: 0, // 明确绑定xAxis索引
          yAxisIndex: 0
        }],
        graphic: {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: msg,
            fontSize: 14,
            color: '#999'
          }
        }
      }
    },

    // 饼图空配置（无需坐标轴）
    getPieEmptyOption(msg) {
      return {
        tooltip: { trigger: 'item' },
        legend: { orient: 'vertical', left: 'left' },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          data: [], // 空数据兜底
          label: { show: false },
          labelLine: { show: false }
        }],
        graphic: {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: msg,
            fontSize: 14,
            color: '#999'
          }
        }
      }
    },

    // 加载数据
    loadData() {
      this.isLoading = true
      Promise.all([
        this.loadStatsData(),
        this.loadTrendData(),
        this.loadDistributionData()
      ]).catch(err => {
        this.$message.error('数据加载失败：' + (err.message || '未知错误'))
      }).finally(() => {
        this.isLoading = false
      })
    },

    // 加载统计数据
    loadStatsData() {
      const params = this.getParams()
      return getOrderStats(params).then(response => {
        const data = response.data || {}
        this.totalOrders = data.totalOrders || 0
        this.totalAmount = data.totalAmount || 0
        this.completedOrders = data.completedOrders || 0
        this.avgProcessTime = data.avgProcessTime || 0

        // 趋势数据
        this.totalOrdersTrend = data.totalOrdersTrend || 0
        this.totalAmountTrend = data.totalAmountTrend || 0
        this.completedOrdersTrend = data.completedOrdersTrend || 0
        this.avgProcessTimeTrend = data.avgProcessTimeTrend || 0
      })
    },

    // 加载趋势数据
    loadTrendData() {
      const params = {
        ...this.getParams(),
        timeRange: this.timeRange
      }
      return getOrderTrend(params).then(response => {
        const data = response.data || {}
        // 确保数据结构安全
        data.categories = data.categories || []
        data.orderCounts = data.orderCounts || []
        data.orderAmounts = data.orderAmounts || []
        this.updateTrendChart(data)
      })
    },

    // 加载分布数据
    loadDistributionData() {
      const params = this.getParams()
      return getOrderDistribution(params).then(response => {
        const data = response.data || {}
        this.updateStatusPieChart(data.statusDistribution || {})
        this.updateTransportChart(data.transportDistribution || {})
        this.updateRegionChart(data.regionDistribution || {})
        this.updateCustomerChart(data.customerDistribution || {})
      })
    },

    // 更新订单趋势图
    updateTrendChart(data) {
      if (!this.trendChart) return

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['订单量', '订单金额(万元)']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: data.categories || []
        },
        yAxis: [
          {
            type: 'value',
            name: '订单量',
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '金额(万元)',
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '订单量',
            type: 'bar',
            data: data.orderCounts || [],
            color: '#409eff',
            barWidth: '60%',
            xAxisIndex: 0, // 明确绑定xAxis
            yAxisIndex: 0
          },
          {
            name: '订单金额(万元)',
            type: 'line',
            data: data.orderAmounts || [],
            color: '#f56c6c',
            symbol: 'circle',
            symbolSize: 8,
            xAxisIndex: 0, // 明确绑定xAxis
            yAxisIndex: 1
          }
        ]
      }

      // 处理无数据情况
      if (data.categories.length === 0) {
        option.graphic = {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '暂无数据',
            fontSize: 14,
            color: '#999'
          }
        }
      }

      this.trendChart.setOption(option)
    },

    // 更新订单状态分布图
    updateStatusPieChart(data) {
      if (!this.statusPieChart) return

      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '订单状态',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: data.billed || 0, name: '已开单', itemStyle: { color: '#409eff' } },
              { value: data.unSchedule || 0, name: '待调度', itemStyle: { color: '#e6a23c' } },
              { value: data.completed || 0, name: '已完成', itemStyle: { color: '#67c23a' } },
              { value: data.cancelled || 0, name: '已取消', itemStyle: { color: '#f56c6c' } }
            ]
          }
        ]
      }

      // 处理无数据情况
      const total = Object.values(data).reduce((sum, val) => sum + (val || 0), 0)
      if (total === 0) {
        option.graphic = {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '暂无数据',
            fontSize: 14,
            color: '#999'
          }
        }
      }

      this.statusPieChart.setOption(option)
    },

    // 更新运输类型分布图
    updateTransportChart(data) {
      if (!this.transportChart) return

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['公路', '铁路', '航空']
        },
        series: [
          {
            name: '订单数量',
            type: 'bar',
            data: [
              data.公路 || 0,
              data.铁路 || 0,
              data.航空 || 0
            ],
            itemStyle: {
              color: function(params) {
                const colorList = ['#5470c6', '#91cc75', '#fac858']
                return colorList[params.dataIndex]
              }
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{c}'
            },
            xAxisIndex: 0, // 明确绑定xAxis
            yAxisIndex: 0
          }
        ]
      }

      // 处理无数据情况
      const total = (data.公路 || 0) + (data.铁路 || 0) + (data.航空 || 0)
      if (total === 0) {
        option.graphic = {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '暂无数据',
            fontSize: 14,
            color: '#999'
          }
        }
      }

      this.transportChart.setOption(option)
    },

    // 更新区域分布图
    updateRegionChart(data) {
      if (!this.regionChart) return

      const regions = Object.keys(data || {})
      const values = regions.map(region => data[region] || 0)

      const option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '订单量',
            type: 'pie',
            radius: '70%',
            data: regions.map((region, index) => ({
              name: region,
              value: values[index]
            })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 处理无数据情况
      if (regions.length === 0) {
        option.graphic = {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '暂无数据',
            fontSize: 14,
            color: '#999'
          }
        }
      }

      this.regionChart.setOption(option)
    },

    // 更新客户订单量图
    updateCustomerChart(data) {
      if (!this.customerChart) return

      // 按订单量排序，取前10名
      const sortedCustomers = Object.entries(data || {})
        .sort((a, b) => b[1] - a[1])
        .slice(0, 10)

      const names = sortedCustomers.map(item => item[0])
      const values = sortedCustomers.map(item => item[1])

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: names,
          axisLabel: {
            rotate: 45,
            interval: 0
          }
        },
        yAxis: {
          type: 'value',
          name: '订单数量'
        },
        series: [
          {
            name: '订单量',
            type: 'bar',
            data: values,
            color: '#722ed1',
            barWidth: '60%',
            xAxisIndex: 0, // 明确绑定xAxis
            yAxisIndex: 0
          }
        ]
      }

      // 处理无数据情况
      if (names.length === 0) {
        option.graphic = {
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '暂无数据',
            fontSize: 14,
            color: '#999'
          }
        }
      }

      this.customerChart.setOption(option)
    },

    // 获取请求参数
    getParams() {
      return {
        startDate: this.dateRange[0] || '',
        endDate: this.dateRange[1] || '',
        orderStatus: this.statusFilter || '',
        transportType: this.transportFilter || ''
      }
    },

    // 日期格式化
    formatDate(date) {
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return `${year}-${month}-${day}`
    },

    // 金额格式化
    formatMoney(amount) {
      if (!amount) return '0.00'
      return parseFloat(amount).toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
    },

    // 处理日期范围变化
    handleDateChange(val) {
      // 当用户清空选择时，val 可能为 null
      if (val === null) {
        this.dateRange = []; // 重置为空数组，避免后续逻辑报错
      }
      this.loadData()
    },

    // 处理筛选条件变化
    handleFilterChange() {
      this.loadData()
    },

    // 处理时间范围变化
    handleTimeRangeChange() {
      this.loadTrendData()
    },

    // 刷新数据
    refreshData() {
      this.loadData()
      this.$message.success('数据已刷新')
    },

    // 处理窗口大小变化，重绘图表
    handleResize() {
      if (this.trendChart) this.trendChart.resize()
      if (this.statusPieChart) this.statusPieChart.resize()
      if (this.transportChart) this.transportChart.resize()
      if (this.regionChart) this.regionChart.resize()
      if (this.customerChart) this.customerChart.resize()
    }
  }
}
</script>

<style scoped>
.order-visualization {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0 0 10px 0;
  color: #1f2d3d;
  font-weight: 500;
}

.page-header p {
  margin: 0;
  color: #8392a5;
  font-size: 14px;
}

.filter-area {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stats-cards {
  margin-bottom: 20px;
}

.stat-card {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.stat-content {
  padding: 15px 10px 15px 15px;
}

.stat-label {
  color: #8392a5;
  font-size: 14px;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: 500;
  color: #1f2d3d;
  margin-bottom: 5px;
}

.stat-trend {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}

.trend-up {
  color: #67c23a;
}

.trend-down {
  color: #f56c6c;
}

.stat-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  color: rgba(64, 158, 255, 0.15);
}

.money-icon {
  color: rgba(103, 194, 58, 0.15);
}

.success-icon {
  color: rgba(103, 194, 58, 0.15);
}

.time-icon {
  color: rgba(230, 162, 60, 0.15);
}

.charts-area {
  margin-bottom: 20px;
}

.chart-row {
  margin-bottom: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid #ebeef5;
}

.chart-container {
  padding: 15px;
  position: relative;
}

.chart {
  width: 100%;
  height: 350px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .chart {
    height: 300px;
  }
}

@media (max-width: 992px) {
  .chart-row .el-col {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .chart {
    height: 250px;
  }
}

@media (max-width: 768px) {
  .stats-cards .el-col {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .filter-area .el-col {
    margin-bottom: 10px;
  }

  .chart {
    height: 200px;
  }
}

@media (max-width: 480px) {
  .stats-cards .el-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
</style>
